// 黑胶会员续费部分开始
// 获取vip头部导航小li
const vipLi = document.querySelectorAll('.vipCa-hd ul li')
// 获取点击显示底部线条的i盒子
const bottomSolid = document.querySelectorAll('.vipCa-hd li i')

// 续费导航栏切换
// 获取黑胶VIP
const ulOne = document.querySelector('.ul-one')
// 获取畅听会员
const ulTwo = document.querySelector('.ul-two')

// console.log(bottomSolid);

// 循环所有的li 
for (let i = 0; i < vipLi.length; i++) {
  // 给所有的li加上点击事件
  vipLi[i].addEventListener('click', function() {
    // 循环遍历所有的i
    for (let j = 0; j < bottomSolid.length; j++) {
      // 先循环遍历把所有的i的透明度设置为0隐藏
      bottomSolid[j].style.opacity = 0
    }
    // 在给点击的那个元素设置透明度为1显示
    bottomSolid[i].style.opacity = 1
    if (this === vipLi[0]) {
      ulOne.style.display = 'flex'
      ulTwo.style.display = 'none'
      product.innerText = `到期自动续费13元，可取消；优惠仅限1次`
      if (vipLi[i] === vipLi[0]) {
        payment.innerHTML = `${itemMoney[0].innerHTML}`
      }
    }else{
      ulTwo.style.display = 'flex'
      ulOne.style.display = 'none'
      product.innerText = `到期自动续费，可随时取消`
      if (vipLi[i] === vipLi[1]) {
        payment.innerHTML = `${itemMoneyT[0].innerHTML}`
      }
    }
  })
}

// 获取黑胶会员价格所有的li
const as = document.querySelectorAll('.price .ul-one .a')
// 获取畅听会员所价格有的li
const ac = document.querySelectorAll('.price .ul-two .a')
// 获取里面的底部折扣部分
const bgcs = document.querySelectorAll('.product-item-bottom')

// 获取下方价格提示文字
const product = document.querySelector('.m-vipcashier-product-desc')
// 获取所有的价格
const itemMoney = document.querySelectorAll('.ul-one li .product-item-origin-finalprice')
const itemMoneyT = document.querySelectorAll('.ul-two li .product-item-origin-finalprice')

const payment = document.querySelector('.payment .money span')
payment.innerHTML = `${itemMoney[0].innerHTML}`

// 循环所有的li
for (let i = 0; i < as.length; i++) {
  // 给所有的li添加点击事件
  as[i].addEventListener('click', function() {
    // 判断li底部的折扣有没有背景样式,有就执行if里面的删除,没有就往下执行
    if(document.querySelector('.product-item-bottom.active')) document.querySelector('.product-item-bottom.active').classList.remove('active')

    // 判断li有没有边框样式，有就删除，没有代码就往下执行
    if(document.querySelector('.a.active')) document.querySelector('.a.active').classList.remove('active')
    
    // 往下执行,没有样式就添加样式
    as[i].classList.add('active')
    // 判断只给前三个添加样式
    if(i <= 2)bgcs[i].classList.add('active')
    product.innerText = ` 到期自动续费${itemMoney[i].innerHTML}元，可取消；优惠仅限1次`
    payment.innerHTML = `${itemMoney[i].innerHTML}`
  })
}

// 循环畅听会员所有的li
for (let c = 0; c < ac.length; c++) {
  ac[c].addEventListener('click', function() {
    if(document.querySelector('.ul-two .a.active')) document.querySelector('.ul-two .a.active').classList.remove('active')
    this.classList.add('active')
    product.innerText = ``
    if (ac[c] === ac[0]) product.innerText = `到期自动续费，可随时取消`
    payment.innerHTML = `${itemMoneyT[c].innerHTML}`
  })
}


// 选择优惠券
const ipt = document.querySelector('.dropDownBox-coupon input')
const option = document.querySelector('.dropDownBox-coupon span')
ipt.addEventListener('focus', function(){

  ipt.addEventListener('mouseenter', function() {
    ipt.style.boxShadow = '0px 0px 0px 0px '
  })
  ipt.addEventListener('mouseleave', function() {
    ipt.style.boxShadow = '0px 0px 6px -1px #328ad4'
  })
  option.style.opacity = 1
})
ipt.addEventListener('blur', function(){
  option.style.opacity = 0
  ipt.style.boxShadow = '0px 0px 0px 0px'
})

// 获取兑换优惠券切换按钮
const coupon = document.querySelector('.choice-coupon i')
// 获取下拉选择框
const dropDownBox = document.querySelector('.dropDownBox-coupon')
// 获取兑换码输入框
const exchangeCode = document.querySelector('.exchangeCode')
// console.log(coupon.innerHTML);
  let flag = true
  coupon.addEventListener('click', function() {
    flag = !flag
    // console.log(flag);
    if(flag === false){
      coupon.innerHTML = '取消兑换优惠券'
      exchangeCode.style.opacity = 1
      dropDownBox.style.opacity = 0

      exchangeCode.style.display = 'flex'
      dropDownBox.style.display = 'none'
    }else{
      coupon.innerHTML = '兑换优惠券'
      dropDownBox.style.opacity = 1
      exchangeCode.style.opacity = 0

      dropDownBox.style.display = 'flex'
      exchangeCode.style.display = 'none'
    }
  })



// 支付二维码部分
// 获取支付宝
const zfb = document.querySelector('.paymentIcon .zfb')
// 获取微信
const wx = document.querySelector('.paymentIcon .wx')
// 获取支付宝图片
const imgZfb = document.querySelector('.qrCode .imgZfb')
// 获取微信图片
const imgWx = document.querySelector('.qrCode .imgWx')

zfb.addEventListener('click', function() {
  imgWx.style.opacity = 0
  imgZfb.style.opacity = 1
})
wx.addEventListener('click', function() {
  imgZfb.style.opacity = 0
  imgWx.style.opacity = 1
})

// 黑胶会员续费部分结束


//阻止所有的a刷新界面
const ass=document.querySelectorAll('.f-updown a')
for (let i=0;i<ass.length;i++) {
   ass[i].addEventListener('click',function(e) {
   e.preventDefault()
})
}
//底部显示隐藏
const hand = document.querySelector('.f-updown')
const lock = document.querySelector('.lock a')
// let flag=true
hand.addEventListener('mouseenter', function () {
   document.querySelector('.f-updown').style.bottom = 0
})
function fn() {
   document.querySelector('.f-updown').style.bottom = '-45px'
}
hand.addEventListener('mouseleave', fn)
//锁
lock.addEventListener('click',function() {
   flag=!flag
   if (flag) {
      lock.classList.remove('lockdown')
      hand.addEventListener('mouseleave', fn)
   } else {
      lock.classList.add('lockdown')
      document.querySelector('.f-updown').style.bottom = 0
      hand.removeEventListener('mouseleave', fn)
   }
   
})
//进度条
const ready=document.querySelector('.ready')
const curser=document.querySelector('.pbar .curser')
curser.onmousedown=function(e) {
   e=e||window.e
   const progressLeft = e.clientX - this.offsetLeft
   document.onmousemove = function(e) {
   e=e||window.e
      const progressX = e.clientX - progressLeft
      if(progressX<=0){
            progressX = 0;
        }
        else if(progressX>=493){
            progressX = 493;
        }
      curser.style.left=progressX+'px'
      ready.style.width=progressX+'px'
}
   document.onmouseup = function(e){
        e = e || window.e
        document.onmousemove = null
        document.onmouseup = null
    }
    return false
}
//播放按钮切换
const play=document.querySelector('.btns .play')
play.addEventListener('click',function() {
   flag=!flag
   if(flag) {
      play.classList.add('palse')
   } else {
      play.classList.remove('palse')
   }
})
//音量
const vol=document.querySelector('.volume')
vol.addEventListener('click',function() {
   flag=!flag
   if(flag) {
      document.querySelector('.m-vol').style.display='block'
   } else {
      document.querySelector('.m-vol').style.display='none'
   }
})
//音量大小调节
const vbtn=document.querySelector('.curr .btn')
const vcur=document.querySelector('.vbg .curr')
vbtn.onmousedown=function(e) {
   e=e||window.e
   const progressTop = e.clientY - this.offsetTop
   document.onmousemove = function(e) {
   e=e||window.e
      let progressY = e.clientY - progressTop
      
      
      if(progressY >= 0){
            progressY = 0;
        }
        else if(progressY <= -90){
            progressY = -90;
        }
      
      vcur.style.height=-progressY+ 'px'
      
}
   document.onmouseup = function(e){
        e = e || window.e
        document.onmousemove = null
        document.onmouseup = null
    }
    return false
}
//随机播放
const mode=document.querySelector('.mode')
const playmode=['随机','单曲循环','循环']
let f=0
mode.addEventListener('click',function() {
   if(f>2) f=0
   document.querySelector('.modetip').style.display='block'
   document.querySelector('.modetip').innerHTML=playmode[f]
   if (f===0) {
      document.querySelector('.mode').classList.remove('mode1')
      document.querySelector('.mode').classList.remove('mode2')
   }
   if (f===1) {
      document.querySelector('.mode').classList.add('mode1')
   }
   if (f===2) {
      document.querySelector('.mode').classList.add('mode2')
   }
   f++
})
mode.addEventListener('mouseleave',function() {
   document.querySelector('.modetip').style.display='none'
})
//播放列表
const clos=document.querySelector('.f-close')
clos.addEventListener('click',function() {
   document.querySelector('.f-playlist').style.display='none'
})
const showadd=document.querySelector('.controls .add')
showadd.addEventListener('click',function() {
   flag=!flag
   document.querySelector('.f-playlist').style.display=flag?'block':'none'
})